<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>招标信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/infotable.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/datatable.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-ui/jquery-ui.min.css" >
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/api.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.dataTables.chs.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/accounting.min.js"></script>
<script type="text/javascript">
$(function() {
    
    var urlPrefix = "${pageContext.request.contextPath}/api/";
    var tenderId = "<s:property value='tenderId' />";
    var memberLoginName = "<s:property value='memberInfo.memberLoginName' />";
    var tenderAPI = new TenderAPI({urlPrefix : urlPrefix});
    var tenderData = {};
    var productData = new Array();
    
    if (tenderId == "") {
        window.location.href = "${pageContext.request.contextPath}/forward/home";
    }
    
    accounting.settings.currency.format = {
      	pos : "%v",
      	zero: "0.00"
    };
    
    tenderAPI.detail({
		onSuccess : function(data) {
		    tenderData = data.tender;
		    $('#lbl_tender_title').text(tenderData.tender_title);
			initTenderInfo();
		},
		onAPIError : function(status, errors) {
		    window.location.href = "${pageContext.request.contextPath}/forward/home";
		},
		onServerError : function(jqXHR, textStatus, errorThrown) {
		    window.location.href = "${pageContext.request.contextPath}/forward/home";
		}
	},
	{
		param: JSON.stringify({
		    tender_id: tenderId,
		    member_login_name: memberLoginName
		})
	});
    
    $('#btn_quote').click(function() {
        if (validate()) {
            var uploadParam = {};
            uploadParam.tender_id = tenderData.tender_id;
            $('#tender_doc_upload_form #upload_param').val(JSON.stringify(uploadParam));
            $('#tender_doc_upload_form').ajaxSubmit({
                success: function(data) {
                    var paramData = {};
                    var quoteData = {};
                    var detailData = new Array();
                    quoteData.tender_id = tenderId;
                    quoteData.member_login_name = memberLoginName;
                    quoteData.total_price = accounting.unformat($('.total_price').text());
                    quoteData.comment = $('#comment').val();
                    quoteData.tender_doc = jQuery.parseJSON(data).attachment_id;
                    paramData.quote = quoteData;
                    
                    $.each(productData, function(index, row) {
                        var quoteData = {};
                        quoteData.tender_id = tenderId;
                        quoteData.product_id = row.product_id;
                        quoteData.member_login_name = memberLoginName;
                        quoteData.unit_price = row.unit_price;
                        quoteData.total_price = row.subtotal_price;
                        detailData.push(quoteData);
                    });
                    paramData.detail = detailData;
                    
                    tenderAPI.quote({
                		onSuccess : function(data) {
                			if (data.result) {
                			    $.alert('提示', "报名成功！");
                			    window.location.href = "tender_detail?tenderId=" + tenderId;
                			}
                		},
                		onAPIError : function(status, errors) {
                		    window.location.href = "${pageContext.request.contextPath}/forward/home";
                		},
                		onServerError : function(jqXHR, textStatus, errorThrown) {
                		    window.location.href = "${pageContext.request.contextPath}/forward/home";
                		}
                	},
                	{
                		param: JSON.stringify(paramData)
                	});
                }
            });
        }
    });
    
    var table = $('#tender_product').DataTable({
		paging: false,
		info: false,
		searching: false,
		jQueryUI: false,
		ordering: false,
		autoWidth: false,
		columns: [
			{data:'product_name', width:'30%', className: 'dt-body-left'},
			{data:'quantity', width:'10%', className: 'dt-body-center'},
			{data:'unit', width:'10%', className: 'dt-body-center'},
			{data:'unit_price', width:'25%', defaultContent: '<input type="text" class="unit_price" maxlength="13" style="width:135px; text-align: right;" value="0.00">'},
			{data:'subtotal_price', width:'25%', defaultContent: '<label class="subtotal_price" style="width:135px;">0.00</label>', className: 'dt-body-right'}
		],
		serverSide: true,
		processing: true,
		ajax: {
			url: '${pageContext.request.contextPath}/api/TenderProductSearchAPI.json',
			type: 'POST',
			data: function(d) {
			    var paramData = {};
			    paramData.tender_id = tenderId;
			    d.param = JSON.stringify(paramData);
			},
			dataSrc: 'products'
		},
		initComplete: function(settings, json) {
		    productData = json.products;
		    $('.unit_price').blur(function() {
		        var index = $(this).index('.unit_price');
		        var value = $('.unit_price:eq(' + index + ')').val();
		        var formatValue = accounting.formatMoney(value);
		        $('.unit_price:eq(' + index + ')').val(formatValue);
		        var subtotalValue = value * json.products[index].quantity;
		        $('.subtotal_price:eq(' + index + ')').text(accounting.formatMoney(subtotalValue));
		        productData[index].unit_price = value;
		        productData[index].subtotal_price = subtotalValue;
		        var totalValue = 0;
		        $.each(productData, function(index, row) {
		            if (row.subtotal_price) {
		                totalValue = totalValue + row.subtotal_price;
		            }
		        });
		        $('.total_price').text(accounting.formatMoney(totalValue));
		    });
		    $('.unit_price').focus(function() {
		        var index = $(this).index('.unit_price');
		        var value = $('.unit_price:eq(' + index + ')').val();
		        $('.unit_price:eq(' + index + ')').val(accounting.unformat(value));
		    });
		}
	});
    
    function initTenderInfo() {
        $('#tender_title').text(tenderData.tender_title);
	    $('#tender_no').text(tenderData.tender_no);
	    $('#tender_pattern_name').text(tenderData.tender_pattern_name);
	    $('#create_date').text(tenderData.create_date.substr(0, 10));
	    $('#enroll_start_date').text(tenderData.enroll_start_date);
	    $('#enroll_end_date').text(tenderData.enroll_end_date);
	    $('#tender_end_date').text(tenderData.tender_end_date);
	    $('#publish_result_date').text(tenderData.publish_result_date);
	    $('#contact_name').text(tenderData.contact_name);
	    $('#contact_tel').text(tenderData.contact_tel);
	    $('#btn_download').button().click(function(event) {
	        window.location.href = "${pageContext.request.contextPath}/file/AttachmentDownload?attachmentId=" + tenderData.tender_template;
	    });
	    $('#tender_doc_upload_form :input[type="file"]').attr('accept', '.doc,.docx,.pdf,.xls,.xlsx');
    }
    
    function validate() {
        for (var index = 0; index < $('.unit_price').length; index++) {
            var target = $('.unit_price:eq(' + index + ')');
            if (target.val() == "" || accounting.unformat(target.val()) == 0 || accounting.unformat(target.val()) > 9999999999.99) {
                $.alert("错误", "单价输入不正确！请重新输入！");
                return false;
            }
        }
        if ($('#comment').val() == "") {
            $.alert("错误", "请输入报价说明！");
            return false;
        }
        if ($('#tenderDoc').val() == "") {
            $.alert("错误", "请选择标书！");
            return false;
        }
        return true;
    }
});
</script>
</head>
<body>
  <div style="text-align: center;" align="center">
    <jsp:include page="top.jsp" />
    <div id="content" style="width: 1000px; margin: 0 auto; margin-top: 10px; border: 1px solid #eee;">
      <div style="width: 990px; height: 30px; border-bottom: 1px solid #eee; text-align: left; padding-top: 5px; padding-left: 10px;">
        <label class="title_label" style="margin-top: 5px;">招标信息&nbsp;</label>
        <label style="font-size: 13px; height: 30px; vertical-align: middle; font-weight: bold; margin-top: 5px;">&gt;</label>
        <label id="lbl_tender_title" style="font-size: 13px; height: 30px; vertical-align: middle; font-weight: bold; margin-top: 5px;"></label>
      </div>
      <div style="width: 727px; margin: 0 auto; margin-top: 10px; text-align: left;">
        <div style="height: 50px;"><label id="tender_title" style="font-size: 20px; font-weight: bold;"></label></div>
      </div>
      <div style="width: 727px; margin: 0 auto; margin-top: 20px;">
        <table class="info_table" style="margin-top: 5px;" >
          <tr>
            <th width="120">招标编号</th>
            <td width="120"><label id="tender_no"></label></td>
            <th width="120">招标方式</th>
            <td width="120"><label id="tender_pattern_name"></label></td>
            <th width="120">发布日期</th>
            <td width="120"><label id="create_date"></label></td>
          </tr>
          <tr>
            <th width="120">报名开始日</th>
            <td width="120"><label id="enroll_start_date"></label></td>
            <th width="120">报名截止日</th>
            <td width="120"><label id="enroll_end_date"></label></td>
            <th width="120">投标截止日</th>
            <td width="120"><label id="tender_end_date"></label></td>
          </tr>
          <tr>
            <th width="120">中标公布日</th>
            <td width="120"><label id="publish_result_date"></label></td>
            <th width="120">联系人</th>
            <td width="120"><label id="contact_name"></label></td>
            <th width="120">联系电话</th>
            <td width="120"><label id="contact_tel"></label></td>
          </tr>
        </table>
      </div>
      <div style="width: 727px; margin: 0 auto; margin-top: 20px; text-align: left;">
        <label class="common_label">招标产品</label>
        <table id="tender_product" class="display">
          <thead>
            <tr>
              <th>产品名称</th>
              <th>数量</th>
              <th>单位</th>
              <th>单价</th>
              <th>小计</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th colspan="4" style="text-align: right;background-color: #B24926; color: white; font-size: 14px; padding: 5px; border: 1px solid #FFFFFF;">合计</th>
              <td style="text-align: right; padding: 0px 10px; font-weight: bold;"><label class="total_price" style="width:135px;">0.00</label></td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div style="width: 727px; margin: 0 auto; margin-top: 20px; text-align: left;">
        <label class="common_label">标书</label>
        <table class="info_table" style="margin-top: 5px;">
          <tr>
            <th width="120" align="center">上传标书</th>
            <td width="600">
              <form id="tender_doc_upload_form" name="tender_doc_upload_form" action="${pageContext.request.contextPath}/file/TenderDocUploadAction.action" method="post" enctype="multipart/form-data" target="upload_frame">
                <input type="file" id="tenderDoc" name="tenderDoc" value="浏览" />&nbsp;&nbsp;
                <button type="button" id="btn_download" style="font-size: 13px;">下载模板</button>
                <iframe width="0" height="0" id="upload_frame" name="upload_frame" style="border: none;"></iframe>
                <input type="hidden" id="upload_param" name="param" />
              </form>
            </td>
          </tr>
        </table>
      </div>
      <div style="width: 727px; margin: 0 auto; margin-top: 20px; text-align: left;">
        <label class="common_label">报价说明</label>
        <textarea id="comment" maxlength="200" style="width: 720px; height: 100px; border: 1px solid #ccc; margin-top: 5px; resize: none;"></textarea>
      </div>
      <div style="width: 727px; margin: 40px auto; margin-top: 40px;">
        <button type="button" id="btn_quote"></button>
      </div>
    </div>
    <div id="footer"><s:text name="copyright" /></div>
  </div>
</body>
</html>